import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal, Select, InputNumber } from 'antd';

import { FormComponentProps } from '@ant-design/compatible/es/form';
import React from 'react';
import TextArea from 'antd/lib/input/TextArea';
import { FormValueType } from './UpdateForm';

const FormItem = Form.Item;

interface CreateFormProps extends FormComponentProps {
  modalVisible: boolean;
  otherValues: any;
  onSubmit: (fieldsValue: FormValueType) => void;
  onCancel: () => void;
}

const CreateForm: React.FC<CreateFormProps> = props => {
  const { modalVisible, form, onSubmit: handleAdd, onCancel, otherValues } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      // form.resetFields();
      handleAdd(fieldsValue);
    });
  };

  return (
    <Modal
      destroyOnClose
      title="新增角色"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      
      <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={'角色名称'}>
        {form.getFieldDecorator('name', {
          rules: [{required: true, message: '名称不能为空'}],
        })(<Input placeholder="" />)}
      </FormItem>
      <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={'角色标识'}>
        {form.getFieldDecorator('nickname', {
          rules: [{required: true, message: '变量标识不能为空'}],
        })(<Input placeholder=""/>)}
      </FormItem>
      <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label={'描述'}>
        {form.getFieldDecorator('remark', {
          rules: [],
        })(<TextArea rows={2} placeholder="" />)}
      </FormItem>
    </Modal>
  );
};

export default Form.create<CreateFormProps>()(CreateForm);
